<template>
  <div class="app">
    <el-row class='main'>
      <el-col :span="24" class="content" style="background-color: rgb(58,58,58);overflow: hidden">
        <el-row class="nuxt-view"><nuxt></nuxt></el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Navbar from '~components/Navbar'
import Headbar from '~components/Headbar'
import moment from 'moment'

export default {
  components: {
    Navbar,
    Headbar
  },
  computed: {
    colSize () {
      return this.isMenuHidden ? 24 : 20
    },
    ...mapGetters(['authUser', 'isMenuHidden'])
  },
  methods: {
    ...mapActions([
      'openMenu' // 映射 this.increment() 为 this.$store.dispatch('increment')
    ])
  },
  data: function () {
    return {dateTime: moment(Date.now() - 8.64e7).format('YYYY年MM月DD日')}
  }
}
</script>

<style scoped lang="scss">
.navCol {
  &.hide {
    opacity: 0;
    width: 0;
    transition: width 0.5s, opacity 0.5s ease-out;
  }
  transition: width 0.5s, opacity 0.5s ease-in;
}
.app {
  height: 100%;
  .el-row.main {
    height: 100%;
    .el-col {
      height: 100%;
    }
    .content {
      transition: width 0.5s, opacity 0.5s ease-in;
    }
  }
}
</style>
